<!--
 * @Author: boyyang
 * @Date: 2022-02-20 00:36:30
 * @LastEditTime: 2022-02-20 11:30:49
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\imgPreview\previewButton.vue
-->

<template>
    <div class="preview-buttons-wrapper">
        <i class="iconfont icon-fangdasuoxiao202" @click="iconClick(0)"></i>
        <i class="iconfont icon-fangdasuoxiao01-copy" @click="iconClick(1)"></i>
        <i class="iconfont icon-xuanzhuan-1" @click="iconClick(2)"></i>
        <i class="iconfont icon-xuanzhuan-2" @click="iconClick(3)"></i>
        <i class="iconfont icon-xiazai5" @click="iconClick(4)"></i>
        
    </div>
</template>

<script lang="ts" setup>
interface IPreviewEmits {
    (e: 'iconClick', val: number): void
}

const emits = defineEmits<IPreviewEmits>()

const iconClick = (index: number) => {
    emits('iconClick', index)
}
</script>

<style scoped lang="scss">
.preview-buttons-wrapper {
    box-sizing: border-box;
    width: 250px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
    i {
        font-size: 22px;
        color: whitesmoke;
        cursor: pointer;

        &:hover {
            color: aquamarine;
        }
    }
}
</style>
